<template>
  <div class="newlyUser">
    <div class="dropdown">
      <el-button type="primary" size="mini" @click="collate()">{{ $t('btn.save') }}</el-button>
      <el-button type="primary" size="mini" @click="pushView('/userslist')">{{ $t('btn.list') }}</el-button>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane class="market" :label="$t('market.info')" name="first">
        <el-form ref="purchaseRef" :model="prodValue" label-width="100px" :rules="prodValueRules">
          <el-form-item :label="$t('market.userAcc')" prop="fuseraccount">
            <el-input v-model.trim="prodValue.fuseraccount" size="mini" disabled />
          </el-form-item>
          <el-form-item :label="$t('market.client')" prop="fname">
            <el-input v-model.trim="prodValue.fname" size="mini" />
          </el-form-item>
          <el-form-item :label="$t('market.sex')" prop="fsex">
            <el-select v-model.trim="prodValue.fsex" size="mini">
              <el-option v-for="item in sexData" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('market.userGroup')" prop="fprimarygroup">
            <el-input v-model.trim="prodValue.fusergroupname" size="mini">
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="groupVisiblit=true"
              />
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('market.phones')" prop="fphone">
            <el-input v-model.trim="prodValue.fphone" size="mini" />
          </el-form-item>
          <el-form-item label="上级领导人" prop="parentid">
            <el-input v-model.trim="prodValue.parent" size="mini">
              <i
                slot="suffix"
                class="el-input__icon el-icon-search"
                @click="userVisiblit=true"
              />
            </el-input>
          </el-form-item>
          <el-form-item :label="$t('market.explain')" prop="fdescription" style="width: 30%;">
            <el-input v-model.trim="prodValue.fdescription" type="textarea" size="mini" />
          </el-form-item>
        </el-form>
        <div style="margin-top: 10px;">
          <el-button size="mini" style="margin-bottom: 5px;" @click="newHang">{{ $t('btn.newHang') }}<!--新增行--></el-button>
          <el-button size="mini" style="margin-bottom: 5px;" @click="delHang">{{ $t('btn.delHang') }}<!--删除行--></el-button>
        </div>
        <jc-table
          :table-data="tableData"
          :table-header="tableHeader"
          serial
          :table-height="tableHeight"
          @rowClick="rowClick"
        >
          <el-table-column :label="$t('market.roleName')" prop="roleId" width="160" align="center">
            <template slot-scope="scope">
              <el-autocomplete
                v-model.trim="scope.row.roleName"
                highlight-first-item
                popper-class="my-autocomplete"
                :fetch-suggestions="querySearch16"
                size="mini"
                @focus="handleRule"
                @select="primaryRule"
              >
                <i
                  slot="suffix"
                  class="el-input__icon el-icon-search"
                  @click="ruleFbi(scope.$index)"
                />
                <template slot-scope="{ item }">
                  <div class="name">{{ item.name }}</div>
                </template>
              </el-autocomplete>
            </template>
          </el-table-column>
        </jc-table>
      </el-tab-pane>
      <el-tab-pane class="market" :label="$t('market.record1')" name="second">
        <jc-form :option-value="prodValue" :options="otherOptions" />
      </el-tab-pane>
    </el-tabs>
    <!--  用户分组  -->
    <user-group v-if="groupVisiblit" @group="primaryGroup" />
    <!--  角色  -->
    <user-rule v-if="roleVisiblit" @rule="primaryRule" />
    <!--申请人-->
    <user v-if="userVisiblit" @supplier="selectApply" />
  </div>
</template>

<script>
import userGroup from '@/views/basic/users/components/userGroup'
import userRule from '@/views/basic/users/components/userRule'
import {
  updateTSecUser,
  queryUserDetails
} from '@/api/basicManagement/userslist'
import jcForm from '@/components/Form'
export default {
  components: {
    userGroup,
    userRule,
    jcForm,
    user: () => import('@/views/basic/users/userslist/component/user')
  },
  data() {
    return {
      activeName: 'first',
      prodValue: {},
      userVisiblit: false, // 用户分组
      groupVisiblit: false, // 用户分组
      roleVisiblit: false, // 角色编码
      tableData: [],
      indexSelf: 0,
      tableHeader: [],
      tableHeight: '65vh',
      sexData: [
        { label: this.$t('market.man'), value: 0 }, // 男
        { label: this.$t('market.woman'), value: 1 } // 女
      ],
      otherUrlObject: {}, // 记录
      otherOptions: {
        fcreator: { label: this.$t('market.creator'), span: 5, disabled: 'disabled' },
        fcreateDate: { label: this.$t('market.createDate'), span: 5, disabled: 'disabled' },
        fdisabletor: { label: this.$t('market.forbider'), span: 5, disabled: 'disabled' },
        fdisableDate: { label: this.$t('market.forbidDate'), span: 5, disabled: 'disabled' },
        fdedisabletor: { label: this.$t('market.forbiderno'), span: 5, disabled: 'disabled' },
        fdedisableDate: { label: this.$t('market.forbidnoDate'), span: 5, disabled: 'disabled' },
        fforbidStatus: { label: this.$t('market.forbidStatu'), span: 5, disabled: 'disabled' }
      },
      prodValueRules: {
        fuseraccount: { required: true, message: '请输入用户账号', trigger: 'blur' },
        fname: { required: true, message: '请输入用户名称', trigger: 'blur' },
        fprimarygroup: { required: true, message: '请选择用户分组' },
        fphone: { required: true, message: '请输入手机号码', trigger: 'blur' },
        fpassword: { required: true, message: '请输入密码', trigger: 'blur' }
      }
    }
  },
  created() {
    if (this.$route.params.id) {
      this.userDetails()
    }
    this.tableHeight = window.innerWidth > 1440 ? 'calc(100vh - 300px)' : '65vh'
  },
  methods: {
    pushView(ev) {
      this.$router.push({ path: ev })
    },
    // 保存
    collate() {
      this.prodValue.roleList = []
      this.tableData.forEach(item => {
        this.prodValue.roleList.push(
          item.roleId
        )
      })
      const {
        fuseraccount,
        fname,
        fprimarygroup,
        fusergroupname,
        fsex,
        fphone,
        fpassword,
        parentid,
        fdescription,
        roleList
      } = this.prodValue
      const DATA = {
        fuseraccount,
        fname,
        fprimarygroup,
        fusergroupname,
        fsex,
        fphone,
        fpassword,
        parentid,
        fdescription,
        roleList,
        fuserId: window.sessionStorage.getItem('fuserId'),
        updateUserId: this.$route.params.id
      }
      updateTSecUser(DATA).then(res => {
        if (res.code === 0) {
          this.userDetails()
          this.$message({ showClose: true, message: res.message, type: 'success' })
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 详情
    userDetails() {
      const DATA = {
        fuserId: this.$route.params.id
      }
      queryUserDetails(DATA).then(res => {
        if (res.code === 0) {
          this.prodValue = res.data
          this.tableData = this.prodValue.roleList
        } else {
          this.$confirm(res.message, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'error'
          })
        }
      })
    },
    // 点击操作记录
    handleTabClick(tab) {
      if (tab.name === 'second') {
        // 操作记录
      }
    },
    // 获取用户分组
    primaryGroup(ev) {
      if (ev.fid) {
        this.prodValue.fprimarygroup = ev.fid
        this.prodValue.fusergroupname = ev.fname
      }
      this.groupVisiblit = false
    },
    // 点击角色编码
    ruleFbi(index) {
      this.indexSelf = index
      this.roleVisiblit = true
    },
    // 角色编码
    primaryRule(ev) {
      if (ev.fpkId) {
        this.tableData[this.indexSelf].roleId = ev.fpkId
        this.tableData[this.indexSelf].roleName = ev.name
      }
      this.roleVisiblit = false
    },
    // 申请人双击
    selectApply(item) {
      if (item.fuserId) {
        this.prodValue.parent = item.fname
        this.prodValue.parentid = item.fuserId
      }
      this.userVisiblit = false
    },
    // 新增行
    newHang() {
      this.tableData.push({
        roleId: '',
        roleName: ''
      })
    },
    // 单击行
    rowClick(row) {
      this.indexSelf = row.index
    },
    // 删除行
    delHang() {
      this.tableData.splice(this.indexSelf, 1)
    }
  }
}
</script>

<style scoped lang="scss">
.newlyUser {
  @include listBom;
  .el-input::v-deep .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  .el-form {
    display: flex;
    flex-wrap: wrap;

    .el-form-item {
      height: 30px;
      width: 275px;
      margin-bottom: 10px;
      //&::v-deep .el-input--mini .el-input__inner{
      //  height: 22px;
      //}
      .btnType {
        margin-right: 20px;
      }
      .el-date-editor.el-input {
        width: 100% !important;
      }

      .el-select {
        width: 100%;
      }
    }
  }
}
</style>
